<template>
  <div class="feedbackMsg">
    <div class="header">
      <div :class="{'color':tabItem==0}" @click="topTag(0)">反馈列表</div>
      <div :class="{'color':tabItem==1}" @click="topTag(1)">发送反馈</div>
    </div>

    <div class="content-feedback">
      <div class="Markdown" v-if="tabItem==1">
        <Markdown :editor="editor" class="me-write-editor"></Markdown>
        <el-row style="padding: 5px;">
          <el-button type="primary" size="small" @click="send()">发送</el-button>
          <el-button type="primary" size="small" @click="editor.value=''">清空内容</el-button>
        </el-row>
      </div>
      <div class="feedList" v-if="tabItem==0">
        <div>
          <el-collapse v-if="msgList.length!=0" accordion>
            <el-collapse-item v-for="(item,index) in msgList" :key="index" :name="index">
              <template slot="title">
                {{convertTimestampToReadable(item.createTime)}} 发送的反馈
              </template>
              <div>
                <span style="font-weight: 700;">反馈内容如下：</span>
                <div v-html="item.msg" v-viewer class="markdown-body html-content"></div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <el-empty v-if="msgList.length==0" image="https://image.kuailemao.xyz/blog/loading/loading-gif.gif"
          description="您还没有发送过反馈呢~"></el-empty>
      </div>
    </div>
  </div>
</template>
<script>
  import Markdown from '../Markdown/MarkdownEditor.vue'
  export default {
    name: 'feedbackMsg',
    props: ["msgList"],
    components: {
      Markdown
    },
    data() {
      return {
        tabItem: 0,
        editor: {
          value: ""
        },
        msgObj: {
          msg: "",
          sendId: 0,
          receiveId: 1,//设置接收者id 默认1为管理员
          msgType: 2,
          isRead: 0
        }
      };
    },
    mounted() {

    },
    methods: {
      topTag(item) {
        if (item == 0) {
          // 重新获取消息内容
          this.$emit("reloadReq");
        }
        this.tabItem = item
      },
      send() {
        this.msgObj.msg = this.editor.value
        this.msgObj.sendId = this.$store.state.UserInfo.id
        this.$api.msg.sendFeed(this.msgObj).then(res => {
          if (res.code == 200) {
            this.msgObj.msg = ""
            this.msgObj.sendId = 0
            this.editor.value = ""
            this.$message.success("感谢您的反馈我们会尽快处理~")
          }
        })
      },
      convertTimestampToReadable(timestamp) {
        // 创建 Date 对象
        const date = new Date(timestamp);
        // 获取年、月、日
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以加 1
        const day = String(date.getDate()).padStart(2, '0');

        // 返回格式化的日期字符串
        return `${year}-${month}-${day}`;
      }
    },
  };
</script>

<style lang="less" scoped>
  .feedbackMsg {
    .header {
      padding: 5px 0;
      display: flex;
      margin: 10px 0;
      border-bottom: 1px solid rgb(146, 143, 143);
    }

    .header div {
      color: gray;
      margin-left: 10px;
      cursor: pointer;
    }

    .color {
      color: #5b94f0 !important;
    }

    .content-feedback {
      /* max-height: 700px;
      min-height: 500px; */
      width: 100%;
    }

    .feedList {
      padding: 4px;
    }

    .me-write-editor {
      min-height: 460px !important;
    }

    /deep/ .markdown-body {
      background-color: #f8f8f8 !important;
      padding: 0 5px;
      /* box-shadow: 0 10px 10px gainsboro; */

      blockquote {
        border-left: 5px solid #78b6f7;
        padding: 10px;
      }

      pre {
        background: #272822 !important;
      }

      img {
        height: 100px !important;
        width: 100px !important;
      }

      p code {
        padding: 8px;
        color: red;
        font-size: 15px;
        background-color: #f0f0f0;
      }
    }
  }
</style>